<style>
	label.error {
		color: #ff0000;
		font-size: italic;
		font-weight: bold;
	}
</style>

<div class="container">
	<div class="demo-row">
		<h2 class="text-success text-center">Create User</h2>
		 <div class="alert alert-info" ng-show="error">{{errorMessage}}</div>
		 
		<form class="form-horizontal" role="form" ng-submit="createUser(user)" j-validate-create>
		  <div class="form-group">
		    <label for="inputLoginId" class="col-sm-3 control-label">Login Id</label>
		    <div class="col-sm-7">
		      <input ng-model="user.loginId" name="loginId" id="loginId" class="form-control" placeholder="Login Id" />
		    </div>
		  </div>
		  <div class="form-group">
		    <label for="inputPassword" class="col-sm-3 control-label">Password</label>
		    <div class="col-sm-7">
		      <input type="password" name="password" id="password" ng-model="user.password" class="form-control" placeholder="Password" />
		    </div>
		  </div>
		  <div class="form-group">
		    <label for="inputPassword" class="col-sm-3 control-label">Password Again</label>
		    <div class="col-sm-7">
		      <input type="password" name="password_again" class="form-control" placeholder="Password Again" >
		    </div>
		  </div>
		   <div class="form-group">
		    <label for="inputIdCardNumber" class="col-sm-3 control-label">Id Card Number</label>
		    <div class="col-sm-7">
		      <input ng-model="user.cardnumberid" name="cardnumberid" id="cardnumberid" class="form-control" placeholder="Id Card Number" />
		    </div>
		  </div>
		  <div class="form-group">
		    <label for="inputFirstName" class="col-sm-3 control-label">First Name</label>
		    <div class="col-sm-7">
		      <input ng-model="user.firstname" name="firstname" id="firstname" class="form-control" placeholder="First Name" />
		    </div>
		  </div>
		   <div class="form-group">
		    <label for="inputLastName" class="col-sm-3 control-label">Last Name</label>
		    <div class="col-sm-7">
		      <input ng-model="user.lastname" name="lastname" id="lastname" class="form-control" placeholder="Last Name" />
		    </div>
		  </div>
		  <div class="form-group">
		    <label for="inputMiddleName" class="col-sm-3 control-label">Middle Name</label>
		    <div class="col-sm-7">
		      <input ng-model="user.midname" name="midname" id="midname" class="form-control" placeholder="Middle Name" />
		    </div>
		  </div>
		  <div class="form-group">
		    <label for="inputPhone1" class="col-sm-3 control-label">Phone 1 *</label>
		    <div class="col-sm-7">
		      <input ng-model="user.phone1" name="phone1" id="phone1" class="form-control" placeholder="Phone 1" />
		    </div>
		  </div>
		  <div class="form-group">
		    <label for="inputPhone2" class="col-sm-3 control-label">Phone 2</label>
		    <div class="col-sm-7">
		      <input ng-model="user.phone2" name="phone2" id="phone2" class="form-control" placeholder="Phone 2" />
		    </div>
		  </div>
		  <div class="form-group">
		    <label for="inputAddress1" class="col-sm-3 control-label">Address 1*</label>
		    <div class="col-sm-7">
		      <input ng-model="user.address1" name="address1" id="address1" class="form-control" placeholder="Address 1" />
		    </div>
		  </div>
		  <div class="form-group">
		    <label for="inputAddress2" class="col-sm-3 control-label">Address 2</label>
		    <div class="col-sm-7">
		      <input ng-model="user.address2" name="address2" id="address2" class="form-control" placeholder="Address 2" />
		    </div>
		  </div>
		  <div class="form-group">
		    <label for="inputEmail1" class="col-sm-3 control-label">Email 1*</label>
		    <div class="col-sm-7">
		      <input ng-model="user.email1" name="email1" id="email1" class="form-control" placeholder="Email 1" />
		    </div>
		  </div>
		  <div class="form-group">
		    <label for="inputEmail2" class="col-sm-3 control-label">Email 2</label>
		    <div class="col-sm-7">
		      <input ng-model="user.email2" name="email2" id="email2" class="form-control" placeholder="Email 2" />
		    </div>
		  </div>
		  <div class="form-group">
		    <label for="inputRole" class="col-sm-3 control-label">Role</label>
		    <div class="col-sm-7">
		      <select ng-model="user.roleid" class="form-control" name="roleid">
		      	<option value="role01">USER</option>
		      	<option value="role02">ADMIN</option>
		      	<option value="role03">SUPPORT</option>
		      	<option value="role04">ACCOUNT ADMIN</option>
		      	<option value="role05">ACCOUNT SUPPORT</option>
		      	<option value="role06">REPORT_SUPPORT</option>
		      </select>
		    </div>
		  </div>
		  <div class="form-group">
		   	<label for="inputAvatar" class="col-sm-3 control-label">Uploading</label>
		  	 <div class="progress col-sm-7">
                     <div class="progress-bar" ng-style="{width : ( percent + '%' ) }"></div>
             </div>
		  </div>
		  <div class="form-group">
		    <label for="inputAvatar" class="col-sm-3 control-label">Avatar</label>
		    <div class="col-sm-7">
		    	<input type="file" class="filestyle" ng-file-select="onFileSelect($files)" data-buttonName="btn-primary" />
		    </div>
		  </div>
		  <div class="form-group"  ng-show="dataUrls['image']">
		     <label for="inputLoginId" class="col-sm-3 control-label">Preview</label>
		     <div class="col-sm-7">
		            <img height="300" width="300" ng-model="user.image" ng-src="{{dataUrls['image']}}">
		    </div>
		  </div>
		  
		  <input type="hidden" ng-model="user.statusid" class="form-control" ng-init="user.statusid = 'status01'" />
		  
		  <div class="form-group">
		    <div class="col-sm-offset-5 col-sm-7">
		      <button type="submit" class="btn btn-default btn-success" ng-click="createUser(user)"><span class="fui-plus-circle"></span>Create</button>
		    </div>
		  </div>
		</form>
			
	
	</div>
</div>